import React, { Component } from 'react';
import moment from 'moment';  //time格式工厂
import style from './DetailsStyle.less'
import { connect } from 'dva';
import { FormattedMessage, formatMessage } from 'umi/locale'; //此方法引入的数据可以在src/locales中配置
import {
  Button,
  Input,
  DatePicker,
  Form,
  Row,
  Col,
  Tabs,
  Table,
  Modal,
  Select,
  Card,
  PageHeader,
  Alert,
  Pagination,
  Upload,
  message,
  Icon,
  Tree,
} from 'antd';

const { TreeNode } = Tree;
const { TabPane } = Tabs;
//命名空间
const namespace = 'RoleManage';

const mapStateToProps = function(state) {
  const dataSource = state[namespace].dataSource;

  return {
    dataSource: dataSource,   //全部数据
    dataList: dataSource ? dataSource.data.list:[],   //专门给表格使用的
    total_elements: dataSource?dataSource.total_elements: 0
  }
};

const mapDispatchToProps = function(dispatch) {
  return {
    dispatch: dispatch
  };
};

@connect(mapStateToProps, mapDispatchToProps)
class DetailsModel extends React.Component {
    constructor (props){
        super(props);
    }

    //直接渲染树函数
    renderTreeNodes = data => data.map((item) => {
      if (item.permissions) {
        return (
          <TreeNode title={item.permission_name} key={item.permission_id} dataRef={item}>
            {this.renderTreeNodes(item.permissions)}
          </TreeNode>
        );
      }else{
        return (
          <TreeNode title={item.permission_name} key={item.permission_id} dataRef={item}>
          </TreeNode>
        );
      }
    })


    render(){

        const row = this.props.nowDetails;
        //树级数据
        const getContentProps = ()=>{
          const content = [

          ];
          if(row){
            const platformPermissMap = row.checkData;
            const tabNameMap = row.tabNameMap;
            if(platformPermissMap){
              for(let platform in platformPermissMap){
                let permission = platformPermissMap[platform]
                content.push(
                  <TabPane tab={tabNameMap[platform]} key={platform+'tabPane'}>
                    <Tree defaultExpandAll={true} className={style['input-box']} treeCheckable="true" showLine={true} onSelect={this.treeNow} >
                      {this.renderTreeNodes(permission)}
                    </Tree>
                  </TabPane>
                )
              }
            }
          }

          return content
        }
        return (
          <div>
              <Modal
              visible={this.props.datailsState}
              title="角色详情"
              onCancel={this.props.closeDatails}
              destroyOnClose={true}
              maskClosable={false}
              bodyStyle={{
                  width: 800,
              }}
              width='800px'
              footer={[
                  <Button
                  key="submit"
                  type="primary"
                  onClick={this.props.closeDatails}
                  >
                  确定
                  </Button>,
              ]}>
              {/* 行1 */}
              <div className={style['one-line']}>
                  <div className={style['one-block']}>
                      <p className={style.p1}>{formatMessage({ id: 'iot.roleManage.details_model.role_name' })}：</p>
                      <p className={style.p2}>{row?row.role_name:null}</p>
                  </div>
                  <div className={style['one-block']}>
                      <p className={style.p1}>{formatMessage({ id: 'iot.roleManage.details_model.create_user_id' })}：</p>
                      <p className={style.p2}>{row?row.create_user_name:null}</p>
                  </div>
              </div>
                <div className={style['one-line']}>
                  <div className={style['one-block']}>
                    <p className={style.p1}>{formatMessage({ id: 'iot.organization.organization_search.tenant_name' })}：</p>
                    <p className={style.p2}>{row && row.tenant_name ?row.tenant_name:null}</p>
                  </div>
                </div>
              {/* 行2 */}
              <div className={style['one-line']}>
                  <div className={style['one-block']}>
                      <p className={style.p1}>{formatMessage({ id: 'iot.roleManage.details_model.create_time' })}：</p>
                      <p className={style.p2}>{row?row.create_time:null}</p>
                  </div>
              </div>
              {/* 行3 */}
              <div className={style['one-line']}>
                  <div className={style['one-block']}>
                      <p className={style.p1}>{formatMessage({ id: 'iot.roleManage.details_model.description' })}：</p>
                      <p className={style.p2}>{row?row.description:null}</p>
                  </div>
              </div>
                <Tabs >
                  {getContentProps ()}
                </Tabs>
              </Modal>
          </div>
        )
    }
}
export default DetailsModel;
